<template>
  <div>
    <Tabs v-model="tab" @on-click="changTab">
      <TabPane label="登陆" name="1">
        <Form
          :model="formData"
          :rules="rules"
          @keydown.enter.native="login"
          ref="loginForm"
        >
          <FormItem prop="loginName">
            <Input
              placeholder="请输入用户名"
              v-model="formData.loginName"
            ></Input>
          </FormItem>
          <FormItem prop="loginPwd">
            <Input
              placeholder="请输入密码"
              type="password"
              v-model="formData.loginPwd"
            ></Input>
          </FormItem>
          <!-- <FormItem prop="code">
        <Input class="code-input" placeholder="请输入验证码" v-model="formData.code"></Input>
        <img :src="codeUrl" @click="verificationCode" class="codeUrl" v-if="codeUrl" />
      </FormItem> -->
          <FormItem class="remember">
            <Checkbox>记住密码</Checkbox>
          </FormItem>
          <FormItem>
            <Button :loading="btnLoading" @click="login" long type="primary"
              >登录</Button
            >
          </FormItem>
        </Form>
      </TabPane>
      <TabPane label="注册" name="2">
        <Form
          :model="formData"
          :rules="rules"
          @keydown.enter.native="login"
          ref="loginForm"
        >
          <FormItem prop="loginName">
            <Input
              placeholder="请输入手机号"
              @on-keyup="
                formValidate.phone = formValidate.phone.replace(/^ +| +$/g, '')
              "
              class="form-width"
              v-model="formData.loginName"
            ></Input>
          </FormItem>
          <FormItem prop="loginPwd">
            <Input
              placeholder="设置密码"
              type="password"
              v-model="formData.loginPwd"
            ></Input>
          </FormItem>
          <!-- <FormItem prop="code">
        <Input class="code-input" placeholder="请输入验证码" v-model="formData.code"></Input>
        <img :src="codeUrl" @click="verificationCode" class="codeUrl" v-if="codeUrl" />
      </FormItem> -->
          <FormItem>
            <Button :loading="btnLoading" @click="register" long type="primary"
              >注册</Button
            >
          </FormItem>
        </Form>
      </TabPane>
    </Tabs>
  </div>
</template>
<script>
import { loginApi } from "@/api/login";
import { employeeApi } from "@/api/employee";
import { PRIVILEGE_TYPE } from "@/constants/login";
export default {
  name: "LoginForm",
  props: {
    // 登录名规则
    loginNameRules: {
      type: Array,
      default: () => {
        return [{ required: true, message: "账号不能为空", trigger: "blur" }];
      }
    },
    // 密码规则
    loginPwdRules: {
      type: Array,
      default: () => {
        return [
          { required: true, message: "密码不能为空", trigger: "blur" },
          {
            type: "string",
            max: 20,
            message: "密码不能超过20个字符！",
            trigger: "blur"
          }
        ];
      }
    }
    // ,
    // // 验证码规则
    // codedRules: {
    //   type: Array,
    //   default: () => {
    //     return [{ required: true, message: '验证码不能为空', trigger: 'blur' }];
    //   }
    // }
  },
  data() {
    return {
      tab: "1",
      // 防止重复提交 按钮加载状态
      btnLoading: false,
      formData: {
        code: "",
        codeUuid: "",
        loginName: "admin",
        loginPwd: "123456"
      },
      codeUrl: ""
    };
  },
  computed: {
    rules() {
      return {
        loginName: this.loginNameRules,
        loginPwd: this.loginPwdRules,
        code: this.codedRules
      };
    }
  },
  mounted() {
    // this.verificationCode();
  },
  methods: {
    changTab(e) {
      this.formData = {
        code: "",
        codeUuid: "",
        loginName: "",
        loginPwd: ""
      };
    },
    // 获取验证码
    async verificationCode() {
      let result = await loginApi.getVerificationCode();
      let datas = result.data;
      this.formData.codeUuid = datas.uuid;
      this.codeUrl = datas.code;
    },
    async register() {
      if (this.formData.loginName == "") {
        this.$Message.error("请输入用户名！");
        return;
      }
      if (this.formData.loginPwd == "") {
        this.$Message.error("请输入密码！");
        return;
      }
      if (!/^(13|14|15|16|17|18)\d{9}$/.test(this.formData.loginName)) {
        this.$Message.error("登录名格式不正确！");
        return;
      }
      // if (!/^[A-Za-z]+[A-Za-z0-9]{5,17}$/.test(this.formData.loginName)) {
      //   this.$Message.error("登录名格式不正确！");
      //   return;
      // }
      this.addEmployee(this.formData);
    },
    // 添加新用户接口
    async addEmployee(param) {
      try {
        this.btnLoading = true;
        // this.isShowLoading = true;
        let result = await employeeApi.addEmployee(param);
        this.isShowAddOrUpdateEmployeeModal = false;
        this.$Message.success("注册成功");
        this.tab = "1";
      } catch (e) {
        //TODO zhuoda sentry
        console.error(e);
      } finally {
        this.btnLoading = false;
      }
    },
    // 登录
    login() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loginSuccess();
        }
      });
    },
    // 登录 - 异步
    async loginSuccess() {
      try {
        this.btnLoading = true;
        let loginResult = await loginApi.login(this.formData);
        let loginInfo = loginResult.data;
        localStorage.clear();
        this.$store.commit("setToken", loginInfo.xaccessToken);
        // 保存用户登录
        this.$store.commit("setUserLoginInfo", {
          id: loginInfo.id,
          loginName: loginInfo.loginName,
          nickName: loginInfo.nickName,
          actualName: loginInfo.actualName,
          phone: loginInfo.phone,
          isSuperMan: loginInfo.isSuperMan
        });
        //设置权限
        this.$store.commit("setUserPrivilege", loginInfo.privilegeList);
        this.btnLoading = false;
        // 跳转到首页
        this.$router.push({
          name: this.$config.homeName
        });
      } catch (e) {
        //TODO zhuoda sentry
        console.error(e);
        this.btnLoading = false;
        //this.verificationCode();
      }
    }
  }
};
</script>
